<script lang="ts" setup>
/* 属性定义 - 使用直接的defineProps方式，不保存到变量 */
defineProps({
  text: {
    type: String,
    default: '正在加载中...',
  },
  subText: {
    type: String,
    default: '请稍等片刻',
  },
});
</script>

<template>
  <div class="loading-container">
    <div class="loading-content">
      <div class="spinner-container">
        <div class="spinner-circle"></div>
        <div class="spinner-circle-dot"></div>
      </div>
      <p class="loading-text">{{ text }}</p>
      <p class="loading-subtext">{{ subText }}</p>
    </div>
  </div>
</template>

<style lang="less" scoped>
@import '../../styles/common.less';

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 200px;
}

.loading-content {
  text-align: center;
}

.spinner-container {
  position: relative;
  width: 60px;
  height: 60px;
  margin: 0 auto 20px;
}

.spinner-circle {
  position: absolute;
  width: 100%;
  height: 100%;
  border: 3px solid transparent;
  border-top-color: @light-primary-color;
  border-radius: 50%;
  animation: spin 1.5s linear infinite;

  .dark & {
    border-top-color: @dark-primary-color;
  }
}

.spinner-circle-dot {
  position: absolute;
  top: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  background: @light-primary-color;
  border-radius: 50%;

  .dark & {
    background: @dark-primary-color;
  }
}

.loading-text {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 500;
  color: @light-text-color;

  .dark & {
    color: @dark-text-color;
  }
}

.loading-subtext {
  font-size: 14px;
  color: @light-secondary-text;

  .dark & {
    color: @dark-secondary-text;
  }
}

/* 通过导入common.less文件引入通用样式 */
</style>
